<script setup lang="ts">
import type { PaginationProps } from '@arco-design/web-vue'
import { IconRefresh } from '@arco-design/web-vue/es/icon'
import { isUndefined } from 'lodash-es'

export interface ContentContainerProps {
  loading?: boolean
  inner?: boolean
  indeterminate?: boolean
  showPagination?: boolean
  refresh?: boolean
  full?: boolean
  containerClass?: string
  headerPrefixClass?: string
  headerClass?: string
  showFooter?: boolean
}

withDefaults(defineProps<ContentContainerProps>(), {
  loading: false,
  inner: false,
  indeterminate: false,
  showPagination: true,
  refresh: true,
  full: false,
  showFooter: true,
  containerClass: '',
})

const emit = defineEmits<{
  (event: 'run'): void
}>()
const checkedAll = defineModel<boolean | undefined>('checkedAll', {
  default: undefined,
})

const pagination = defineModel<
  | (PaginationProps & {
    current: number
    pageSize: number
  })
  | false
>('pagination', {
      default: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
    })

async function handlePaginationChange() {
  await nextTick()
  emit('run')
}
const slots = useSlots()
const isFooter = computed(() => {
  return (
    !!slots?.['footer-prefix']
    || !!slots?.['footer-suffix']
    || !!pagination.value
  )
})
</script>

<template>
  <a-spin
    class="resource-area content-container-spin"
    :class="{ 'content-container-spin__inner': inner }"
    :loading="loading"
  >
    <div
      class="content-container"
      :class="[
        {
          'h-full': full,
          'pb-6': !isFooter,
          // 是否是内部的
          'content-container__inner': inner,
        },
        containerClass,
      ]"
    >
      <div
        v-if="slots?.['header-prefix']"
        class="pb-6"
        :class="[{ 'px-6': !inner }, headerPrefixClass]"
      >
        <slot name="header-prefix" />
      </div>

      <div
        v-if="slots?.header"
        class="content-container__header"
        :class="[headerClass]"
      >
        <slot name="header" />
        <i
          v-if="!inner"
          class="flex-1"
        />
        <slot name="extra" />
        <a-button
          v-if="refresh"
          class="shrink-0 h-[30px]! w-[30px]!"
          @click="emit('run')"
        >
          <template #icon>
            <icon-refresh
              size="16"
              :spin="loading"
            />
          </template>
        </a-button>
      </div>
      <div
        class="content-content"
        :class="{ 'h-full': full, 'px-6': !inner }"
      >
        <slot />
      </div>
      <div
        v-if="
          (slots?.['footer-prefix']
            || slots?.['footer-suffix']
            || pagination)
            && showFooter
        "
        class="content-container__footer"
        :class="{ 'p-6': !inner, 'py-6': inner }"
      >
        <a-checkbox
          v-if="!isUndefined(checkedAll)"
          v-model="checkedAll"
          class="ml-2 select-none"
          :indeterminate="indeterminate"
        >
          全选
        </a-checkbox>
        <slot name="footer-prefix" />
        <i class="flex-1" />
        <slot name="footer-suffix">
          <a-pagination
            v-if="pagination && showPagination"
            v-model:current="pagination.current"
            v-model:page-size="pagination.pageSize"
            v-bind="pagination"
            show-total
            show-page-size
            :total="pagination.total || 0"
            :page-size-options="[15, 20, 30, 50, 100]"
            @change="handlePaginationChange"
            @page-size-change="handlePaginationChange"
          />
        </slot>
      </div>
    </div>
  </a-spin>
</template>

<style scoped lang="less">
.content-container-spin {
  @apply w-full  flex flex-col;
  + .content-container-spin {
    .content-container {
      @apply mt-0;
    }
  }
  :deep(.arco-spin-mask) {
    @apply top-6 bottom-6;
  }
  &__inner {
    :deep(.arco-spin-mask) {
      @apply top-0 bottom-0;
    }
  }
}

.content-container {
  @apply flex flex-col  pt-6 rounded-xl;

  // box-shadow:
  //   0px 4px 5px 0px rgba(29, 33, 41, 0.08),
  //   0px 2px 4px 0px rgba(29, 33, 41, 0.04);

  &.content-container__inner {
    @apply my-0 shadow-none p-6;
    .content-container__header {
      @apply px-0!;
    }
    .content-container__footer {
      @apply pb-0;
    }
  }
  .content-container__header {
    @apply min-h-30px px-6 mb-6 gap-4 flex items-center !overflow-hidden;
    .strong-search + .flex-1 {
      @apply hidden;
    }
  }
  .content-container__footer {
    @apply flex items-center;
  }
}
</style>
